<template>
    <div class="manage">
        <div class="control clearfix">
            <div class="search-small fl">
                <label for="search-small" class="label-search">问题搜索：</label>
                <input type="text" id="search-small"/>
            </div>
            <div class="update fl">
                <span class="update-text">更新日期：</span>
                
                 <!-- <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
                <span>-</span>
                <el-date-picker
                    v-model="value2"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker> -->
                <el-date-picker
                    v-model="date"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    class="date"
                    :default-time="['12:00:00']">
                </el-date-picker>
            </div>
            <div class="btn-wrap fl">
                <button class="green-btn btn-search">搜索</button>
                <button class="green-btn btn-clear">清除</button>
            </div>
        </div>
        <div class="btn-add-wrap">
            <button class="btn-add green-btn" @click='openAdd'>新增</button>
        </div>  
        <div class="table">
             <div class="table-control">
                 <label for="checkAll" class="check-all">
                     <input type="checkbox" name="checkAll" id="checkAll"/>
                     <span class="checkAll-text">全选</span>
                      
                 </label>
                 
                 <button class="grey-btn">删除</button>
                 <button class="grey-btn">调整分类</button>
             </div>
             <!-- <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="55"
                >
                </el-table-column>

                <el-table-column
                    label="问题"
                    width="480">
                    <template slot-scope="scope">
                        <span style="margin-left:10px">{{scope.row.name}}</span>
                    </template>
                </el-table-column>

                 <el-table-column
                    label="日期"
                    width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData4)"
                        type="text"
                        size="small">
                        编辑
                        </el-button>
                         <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData4)"
                        type="text"
                        size="small">
                        移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table> -->
            <ul class="manageAsking-list">
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                <li class="manageAsking-item" >
                    <div class="wrap clearfix">
                        <label  class="item-checkbox fl" >
                            <input type="checkbox" name="" id="">
                        </label>
                        <p class="fl item-title">个人名字是否可以修改？登录账号是否可以修改</p>
                        <p class="fl item-date">2018-05-21</p>
                        <p class="fl item-control">
                            <span class="btn-edit">编辑</span>
                            <span class="btn-del">删除</span>
                        </p>
                    </div>
                </li>
                
                                
            </ul>
            <!-- <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
                </el-pagination>
            </div> -->
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            value2:'',
            date:'',
            tableData: [
                {
                    name:"个人名字是否可以修改？登录账号是否可以修改",
                    date:'2018-5-13',               
                },
                 {
                    name:"个人名字是否可以修改？登录账号是否可以修改",
                    date:'2018-5-13',               
                },
                 {
                    name:"个人名字是否可以修改？登录账号是否可以修改",
                    date:'2018-5-13',               
                },
                 {
                    name:"个人名字是否可以修改？登录账号是否可以修改",
                    date:'2018-5-13',               
                },
                 {
                    name:"个人名字是否可以修改？登录账号是否可以修改",
                    date:'2018-5-13',               
                },
                 {
                    name:"个人名字是否可以修改？登录账号是否可以修改",
                    date:'2018-5-13',               
                },
                 {
                    name:"个人名字是否可以修改？登录账号是否可以修改",
                    date:'2018-5-13',               
                },

            ]
        }
    },
    methods:{
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      openAdd(){ //打开新增问题页面
        this.$router.push('/backdoor/newQuestion');
      }

    }

}
</script>

<style lang='scss'>
.manage{
    .control{
        @at-root #search-small{
            width: 200px;
            height: 22px;
            border: 1px solid #a0a0a0;
            border-radius: 3px;
        }
        .search-small{
            margin-right: 20px;
            .label-search{
                font-size: 14px;
                color:#000;
            }

        }
        .update{
            margin-right: 44px;
            .update-text{
                vertical-align: middle;
                
                
                font-size: 14px;
                font-weight: bold;
            }
            .date{
                width: 216px;      
                height: 24px;         
                vertical-align: middle;
                line-height: 24px;
                .el-input__inner{
                    border: 1px solid #a0a0a0;

                }
                .el-icon-date:before{ //小闹钟
                   content: "";
                   display: none;

                }
                .el-range-separator{  //中间那个'-'
                    line-height: 14px;
                }
                .el-date-editor .el-range__close-icon{  //删除符号
                    line-height: 14px;

                }

            }
        }
        

    }
    .green-btn{  //公共样式
        padding: 4px 10px;
        font-size: 16px;
        color:#fff;
        background-color:#84c224;
        border-radius: 3px;
        cursor: pointer;
    }
    .btn-add-wrap{
        margin-bottom: 14px;       
    }
    .table-control{
        font-size: 0;
        padding-bottom: 12px;
        border-bottom:1px solid #6F6F6F;

        .check-all{
            font-size: 14px;
            display: inline-block;
            margin-right: 18px;
            
            cursor: pointer;
            #checkAll{
                vertical-align: middle;
            }
            .checkAll-text{
                margin-right: 6px;
                font-size: 14px;
                vertical-align: middle;

            }
            

        }
        .grey-btn{
            color: #fff;
            padding: 2px 4px;
            margin-right: 14px;
            font-size: 14px;
            background-color: #9fa09e;
            cursor: pointer;
        }
    }      
    .manageAsking-list{   
        .manageAsking-item{
            height: 32px;
            line-height: 32px;
            border-bottom: 1px solid #6F6F6F;
            .item-title{
                width: 500px;
                color:#5d5a5a;
            }
            .item-date{
                width: 200px;
                color:#5d5a5a;
                text-align: center;
            }
            .item-control{
                width: 100px;
                color:#65ccec;
                cursor: pointer;
                .btn-edit,.btn-del{
                    display: inline-block;                   
                    &:hover{
                        text-decoration: underline;
                    }

                }
                .btn-edit{

                }
                .btn-del{

                }

            }

        }
        

    }



}


</style>
